<script setup lang="ts">
import { onMounted, reactive, ref } from "@vue/runtime-core";
import Header from "@/components/header/index.vue";
import New from "@/views/new/index.vue";
import Produce from "@/views/produce/index.vue";
import Swiper from "@/views/swiper/index.vue";
import Introduce from "@/views/introduce/index.vue";
const pictures = [
  {
    name: '第二张', value: Swiper, config: {
    },
    unHeader: true,
  },
  {
    name: '第三张', value: Produce, config: {
      title: "产品",
      bgImg: '',

    }
  },
  {
    name: '第四张', value: Introduce, config: {
      title: "公司简介",
      bgImg: '',

    }
  },
  {
    name: '第五张', value: New, config: {
      title: "公司新闻",
      bgImg: ''
    }
  }
]
const scrolling = ref(false)
const scrollTimer = ref<any>(null)
const carouselRef = ref<any>(null)
const handleMouseWheel = (event: any) => {
  clearTimeout(scrollTimer.value);
  const delta = Math.sign(event.deltaY);
  // 设置滚动状态为正在滚动
  scrolling.value = true;

  // 在这里处理滚轮滑动事件的逻辑

  // 设置一个延迟时间，用于判断滚动是否停止
  scrollTimer.value = setTimeout(() => {
    // 滚动停止后的逻辑
    scrolling.value = false;
    if (delta > 0) {
      carouselRef.value?.next?.()
    } else {
      carouselRef.value?.prev?.()
    }

  }, 500); // 设置延迟时间，单位为毫秒
}
</script>

<template>
  <div class="wrapper">
    <Header class="header" />
    <div class="swiper">
      <div class="carousel" @wheel="handleMouseWheel">
        <el-carousel ref="carouselRef" direction="vertical" indicator-position="none" height="100vh" :loop="false"
          :initial-index="0" width="100vw">
          <el-carousel-item v-for="(item, idx) in pictures" :autoplay="false" :key="idx">
            <div :class="{ 'swiper-style': !item?.unHeader, 'normal-style': !item?.unHeader }" class="fill-style">
              <component :is="item.value" :key="idx" :config="item.config">
                <template v-slot:header>
                  <div class="slot-header">
                    <div class="br"></div>
                    <span class="title-name">{{ item.config?.title }}</span>
                  </div>
                </template>
              </component>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.wrapper {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .header {
    height: 100px;
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .swiper {
    width: 100%;
    height: 95%;
    position: relative;

    .carousel {
      width: 100%;
      height: 100%;

      .swiper-style {
        padding-top: 100px !important;
      }

      .slot-header {
        display: flex;
        align-items: center;

        .br {
          width: 2px;
          background-color: #09a4f4;
          height: 14px;
        }

        .title-name {
          font-size: 16px;
          padding: 0 5px;
          font-weight: 600;
        }
      }

      .normal-style {
        padding: 0 50px;
      }
    }
  }
}
.fill-style {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>